<template>
	<div class="aside">
		<div>
			<el-button type="primary" :icon="FolderAdd" circle @click="dialogVisible = true"></el-button>
			<el-button type="primary" :icon="Refresh" circle @click="getConnectList"></el-button>
		</div>
		<div>
			<Menus ref="refMenus" :addTab="addTab"/>
		</div>
		
		<el-dialog
			v-model="dialogVisible"
			title="新建数据源"
			width="400px"
			destroy-on-close
		>
			<el-form :model="formData" label-width="auto" :rules="rules" ref="connectForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model="formData.name" clearable></el-input>
				</el-form-item>
				<el-form-item label="数据库类型" prop="dbType">
					<el-select v-model="formData.dbType" placeholder="请选择数据库类型" clearable>
						<el-option label="H2" value="H2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="链接地址" prop="address">
					<el-input v-model="formData.address" clearable></el-input>
				</el-form-item>
<!-- 				<el-form-item label="端口" prop="port">
					<el-input v-model="formData.port" clearable></el-input>
				</el-form-item> -->
				<el-form-item label="用户名" prop="loginName">
					<el-input v-model="formData.loginName" clearable></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="formData.password" clearable></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="success" @click="testConnect(connectForm)">测试链接</el-button>
				<el-button type="primary" @click="connect(connectForm)">链接</el-button>
				<el-button type="info" @click="cancel(connectForm)">取消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { FolderAdd, Refresh } from '@element-plus/icons-vue'
	import Menus from './menus.vue'
	
	const props = defineProps({
		addTab: {
			type: Function
		}
	})
	
	const { appContext } = getCurrentInstance();
	const $axios = appContext.config.globalProperties.$axios;
	
	const connectForm = ref()
	const dialogVisible = ref(false)
	const refMenus = ref(null)
	const formData = reactive({
		name: '',
		address: '',
		port: '',
		dbType: '',
		loginName: '',
		password: ''
	})
	
	const checkPort = (rule, value, callback) => {
		if (!/^[0-9]+$/.test(value)) {
		  callback(new Error('请输入数字'))
		} else {
		  callback()
		}
	}
	
	const rules = reactive({
		name: [
		    { required: true, message: '请输入名称', trigger: 'blur' },
		    { min: 1, max: 20, message: '长度1-20个字符', trigger: 'blur' },
		],
		dbType: [
			{required: true, message: '请选择数据库类型', trigger: 'change'}
		],
		address: [
			{ required: true, message: '请输入链接地址', trigger: 'blur' },
		],
		// port: [
		// 	{ required: true, message: '请输入端口', trigger: 'blur' },
		// 	{ validator: checkPort, trigger: 'blur' },
		// ],
		loginName: [
			{ required: true, message: '请输入用户名', trigger: 'blur' }
		],
		password: [
			{ required: true, message: '请输入密码', trigger: 'blur' }
		]
	})
	
	const testConnect = (formElement) => {
		formElement.validate((valid) => {
			if (valid) {
				// TODO 请求后台测试。
				$axios.post("/own/testconnect", formData).then(res => {
					console.log("res", res)
					if (res) {
						ElMessage({
							showClose: true,
							message: '连接成功',
							type: 'success'
						})
					} else {
						ElMessage({
							showClose: true,
							message: '连接失败',
							type: 'error'
						})
					}
				}, err => {
					ElMessage({
						showClose: true,
						message: '连接失败',
						type: 'error'
					})
				})
			}
		})
	}
	
	const connect = (formElement) => {
		formElement.validate((valid) => {
			if (valid) {
				console.log('fields', formData)
				// TODO 请求后台链接并保存。成功之后关闭对话框，刷新aside
				$axios.post("/own/create", formData).then(res => {
					console.log(res)
					getConnectList()
					refMenus.value.expand(res.id)
				})
				cancel(formElement)
			}
		})
	}
	
	const cancel = (formElement) => {
		formElement.resetFields()
		dialogVisible.value = false
	}
	
	const getConnectList = () => {
		refMenus.value.getConnectList()
	}
	
	const addTab = (data) => {
		console.log('aisde', data)
		props.addTab(data)
	}
	
</script>

<style lang="scss" scoped>
	.aside {
		padding: 10px;
	}
	.el-button+.el-button {
		margin-left: 2px;
	}
</style>